<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频播放页面</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- 配置Tailwind自定义颜色 -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#FF3B30", // 主题色（类似抖音红）
              dark: "#1C1C1E",
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-shadow {
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        .animate-pulse-slow {
          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
      }
    </style>

    <style>
      /* 基础样式 */
      body {
        background-color: #000;
        overflow-x: hidden;
      }

      /* 视频容器样式 */
      .video-container {
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        aspect-ratio: 9/16; /* 竖屏视频比例 */
      }

      /* 平滑过渡动画 */
      .fade-in {
        animation: fadeIn 0.5s ease-in-out;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    </style>
  </head>

  <body class="bg-dark text-white min-h-screen">
    <!-- 顶部导航 -->
    <header
      class="fixed top-0 left-0 right-0 z-50 bg-dark/80 backdrop-blur-sm px-4 py-3"
    >
      <div class="flex items-center justify-between max-w-900px mx-auto">
        <h1 class="text-xl font-bold text-primary">视频播放</h1>
        <div class="flex items-center gap-3">
          <button class="p-2 hover:bg-white/10 rounded-full transition-colors">
            <i class="fa fa-search text-white/80"></i>
          </button>
          <button class="p-2 hover:bg-white/10 rounded-full transition-colors">
            <i class="fa fa-user-circle-o text-white/80"></i>
          </button>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="pt-16 pb-20">
      <!-- 视频播放容器 -->
      <div class="video-container">
        <!-- 视频元素 -->
        <video
          id="mainVideo"
          class="w-full h-full object-cover"
          muted
          autoplay
          playsinline
        >
          <source
            src="https://localhost:5500/static/video/1.mp4"
            type="video/mp4"
          />
          您的浏览器不支持视频播放
        </video>

        <!-- 静音提示框（默认隐藏，视频播放时显示） -->
        <div
          id="soundTip"
          class="hidden absolute bottom-20 right-4 bg-black/70 backdrop-blur-sm px-4 py-2 rounded-full flex items-center gap-2 fade-in animate-pulse-slow cursor-pointer hover:bg-black/90 transition-all"
        >
          <i class="fa fa-volume-off text-white"></i>
          <span class="text-sm font-medium">点击开启声音</span>
        </div>

        <!-- 视频控制层（简化版） -->
        <div
          class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <button
                id="playPauseBtn"
                class="p-2 hover:bg-white/10 rounded-full transition-colors"
              >
                <i class="fa fa-pause text-white"></i>
              </button>
              <div class="text-sm">01:23 / 05:45</div>
            </div>
            <button
              class="p-2 hover:bg-white/10 rounded-full transition-colors"
            >
              <i class="fa fa-expand text-white"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 视频信息 -->
      <div class="max-w-900px mx-auto px-4 mt-4">
        <h2 class="text-lg font-semibold mb-2">这是一段示例视频标题</h2>
        <p class="text-white/70 text-sm mb-4">
          视频简介：这是一个用于演示静音提示功能的示例视频，点击右下角提示可开启声音。
        </p>

        <!-- 互动按钮 -->
        <div class="flex items-center gap-6">
          <button class="flex flex-col items-center gap-1">
            <i class="fa fa-heart-o text-xl"></i>
            <span class="text-xs text-white/70">1.2k</span>
          </button>
          <button class="flex flex-col items-center gap-1">
            <i class="fa fa-comment-o text-xl"></i>
            <span class="text-xs text-white/70">342</span>
          </button>
          <button class="flex flex-col items-center gap-1">
            <i class="fa fa-share text-xl"></i>
            <span class="text-xs text-white/70">分享</span>
          </button>
        </div>
      </div>
    </main>

    <!-- 底部导航（模拟App底部Tab） -->
    <footer
      class="fixed bottom-0 left-0 right-0 bg-dark border-t border-white/10 z-50"
    >
      <div class="flex items-center justify-around py-3">
        <button class="flex flex-col items-center gap-1 text-primary">
          <i class="fa fa-home text-lg"></i>
          <span class="text-xs">首页</span>
        </button>
        <button class="flex flex-col items-center gap-1 text-white/60">
          <i class="fa fa-compass text-lg"></i>
          <span class="text-xs">发现</span>
        </button>
        <button class="flex flex-col items-center gap-1 text-white/60">
          <i class="fa fa-plus-circle text-2xl"></i>
          <span class="text-xs">发布</span>
        </button>
        <button class="flex flex-col items-center gap-1 text-white/60">
          <i class="fa fa-bell-o text-lg"></i>
          <span class="text-xs">通知</span>
        </button>
        <button class="flex flex-col items-center gap-1 text-white/60">
          <i class="fa fa-user-o text-lg"></i>
          <span class="text-xs">我的</span>
        </button>
      </div>
    </footer>

    <script>
      // 获取DOM元素
      const video = document.getElementById("mainVideo");
      const soundTip = document.getElementById("soundTip");
      const playPauseBtn = document.getElementById("playPauseBtn");

      // 视频播放时显示静音提示
      video.addEventListener("play", () => {
        // 只有在静音状态下才显示提示
        if (video.muted) {
          soundTip.classList.remove("hidden");
        }
      });

      // 点击提示框开启声音
      soundTip.addEventListener("click", () => {
        // 尝试取消静音
        video.muted = false;
        // 隐藏提示框
        soundTip.classList.add("hidden");

        // 播放视频（如果处于暂停状态）
        if (video.paused) {
          video.play().catch((err) => {
            console.log("播放失败:", err);
          });
        }
      });

      // 监听视频静音状态变化
      video.addEventListener("volumechange", () => {
        if (video.muted) {
          soundTip.classList.remove("hidden");
        } else {
          soundTip.classList.add("hidden");
        }
      });

      // 播放/暂停按钮功能
      playPauseBtn.addEventListener("click", () => {
        if (video.paused) {
          video.play();
          playPauseBtn.innerHTML = '<i class="fa fa-pause text-white"></i>';
        } else {
          video.pause();
          playPauseBtn.innerHTML = '<i class="fa fa-play text-white"></i>';
        }
      });

      // 页面加载完成后自动播放视频（处理可能的自动播放限制）
      window.addEventListener("load", () => {
        video.play().catch((err) => {
          console.log("自动播放失败，等待用户交互:", err);
          // 如果自动播放失败，显示播放按钮提示
          playPauseBtn.innerHTML = '<i class="fa fa-play text-white"></i>';
        });
      });
    </script>
  </body>
</html>
